<%@ page errorPage="/error.jsp" pageEncoding="UTF-8" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<body>
	<article class="container_12">
		
		<section class="grid_12">
			<div class="block-border"><div class="block-content">
				<h1>File explorer</h1>
			
				<div class="block-controls">
					
					<ul class="controls-buttons">
						<li>

							Occupied space
							<meter class="progress-bar"><span style="width:68%">68%</span></meter>
						</li>
						<li class="sep"></li>
						<li><a href="javascript:void(0)"><img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/arrow-circle.png" />" width="16" height="16"></a></li>
					</ul>
					
				</div>
				
				<div class="content-columns left30">
					
					<div class="content-columns-sep"></div>

					
					<div class="content-left">
						
						<div class="with-head">
							<div class="head">
								<div class="black-cell"><span class="error"></span></div>
								<div>
									<div class="button menu-opener">
										Actions
										<div class="menu-arrow">
											<img src="<spring:url value="/resources/styles/themes/admin/images/menu-open-arrow.png" />" width="16" height="16">

										</div>
										<div class="menu">
											<ul>
												<li class="icon_export"><a href="javascript:void(0)">Choose folder</a>
													<ul>
														<li class="icon_network"><a href="javascript:void(0)">Website</a></li>
														<li class="icon_server"><a href="javascript:void(0)">Server root</a></li>

													</ul>
												</li>
												<li class="icon_refresh"><a href="javascript:void(0)">Reload</a></li>
												<li class="icon_search"><a href="javascript:void(0)">Search</a></li>
												<li class="sep"></li>
												<li class="icon_terminal"><a href="javascript:void(0)">Custom search</a></li>
											</ul>

										</div>
									</div>
									<div class="button menu-opener">
										Filters
										<div class="menu-arrow">
											<img src="<spring:url value="/resources/styles/themes/admin/images/menu-open-arrow.png" />" width="16" height="16">
										</div>
										<div class="menu">
											<ul>

												<li class="icon_doc_image"><a href="javascript:void(0)">Images only</a></li>
												<li class="icon_computer"><a href="javascript:void(0)">System files</a></li>
												<li class="sep"></li>
												<li class="icon_terminal"><a href="javascript:void(0)">Custom filter</a></li>
											</ul>
										</div>
									</div>

								</div>
							</div>
							
							<div class="dark-grey-gradient with-padding" style="height:400px; overflow: auto">
								
								<ul class="arbo with-title">
									<li>
										<a href="javascript:void(0)" class="title-computer toggle">My documents</a>
										<ul>
											<li class="close">

												<span class="toggle"></span>
												<a href="javascript:void(0)" class="folder"><span>Templates</span></a>
												<ul>
													<li><a href="javascript:void(0)" class="document-web"><span>File 1</span></a></li>
													<li><a href="javascript:void(0)" class="document-web"><span>File 2</span></a></li>
													<li><a href="javascript:void(0)" class="document-web"><span>File 3</span></a></li>
												</ul>

											</li>
											<li class="close">
												<span class="toggle"></span>
												<a href="javascript:void(0)" class="folder"><span>Archives</span></a>
												<ul>
													<li><a href="javascript:void(0)" class="document-excel"><span>File 1</span></a></li>
													<li><a href="javascript:void(0)" class="document-web"><span>File 2</span></a></li>

													<li><a href="javascript:void(0)" class="document-flash"><span>File 3</span></a></li>
												</ul>
											</li>
											<li>
												<span class="toggle"></span>
												<a href="javascript:void(0)" class="current folder"><span>Documents</span></a>
												<ul>
													<li class="close">

														<span class="toggle"></span>
														<a href="javascript:void(0)" class="folder-bookmark"><span>Favourites</span></a>
														<ul>
															<li><a href="javascript:void(0)" class="document-illustrator"><span>File 1</span></a></li>
															<li><a href="javascript:void(0)" class="document"><span>File 2</span></a></li>
															<li><a href="javascript:void(0)" class="document"><span>File 3</span></a></li>
														</ul>

													</li>
													<li class="close">
														<span class="toggle"></span>
														<a href="javascript:void(0)" class="folder-image"><span>Images</span></a>
														<ul>
															<li><a href="javascript:void(0)" class="document-image"><span>File 1</span></a></li>
															<li><a href="javascript:void(0)" class="document-image"><span>File 2</span></a></li>

															<li><a href="javascript:void(0)" class="document-music"><span>File 3</span></a></li>
														</ul>
													</li>
													<li><a href="javascript:void(0)" class="document-photoshop"><span>Layout.psd</span></a></li>
													<li><a href="javascript:void(0)" class="document-pdf"><span>Instructions.pdf</span></a></li>
												</ul>
											</li>

											<li>
												<span class="toggle"></span>
												<a href="javascript:void(0)" class="folder"><span>Loading folder</span></a>
												<ul>
													<li><span class="loading">Loading...</span></li>
												</ul>
											</li>
											<li>

												<span class="toggle"></span>
												<a href="javascript:void(0)" class="folder"><span>Empty folder</span></a>
												<ul>
													<li><span class="empty">Empty</span></li>
												</ul>
											</li>
										</ul>
									</li>

								</ul>
								
							</div>
						</div>
						
						<ul class="message">
							<li>Error while refreshing data</li>
						</ul>
						
					</div>
					
					<div class="content-right">

						
						<div class="with-head">
							<div class="head">
								<div class="black-cell with-gap"><span class="success"></span></div>
								<div class="black-cell">Sort by</div>
								<div>
									<span class="column-sort">
										<a href="javascript:void(0)" title="Sort up" class="sort-up active"></a>
										<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>

									</span>
									Name
								</div>
								<div>
									<span class="column-sort">
										<a href="javascript:void(0)" title="Sort up" class="sort-up"></a>
										<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
									</span>
									Date
								</div>

								<div>
									<span class="column-sort">
										<a href="javascript:void(0)" title="Sort up" class="sort-up"></a>
										<a href="javascript:void(0)" title="Sort down" class="sort-down"></a>
									</span>
									Filesize
								</div>
								<a class="button" href="javascript:void(0)">Upload</a>
							</div>

							
							<div class="dark-grey-gradient with-padding" style="height:400px; overflow: auto">
								
								<div class="loading-tab stick-to-top">
									<span class="button">File1.zip <img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/tick-circle-blue.png" />" width="16" height="16"></span>&nbsp;
									<span class="button">File2.zip <img src="<spring:url value="/resources/styles/themes/admin/images/icons/fugue/cross-circle.png" />" width="16" height="16"></span>&nbsp;
									<span class="button">
										File3.zip
										<span class="progress-bar"><span style="width:50%">50%</span></span>
										<small>1.74 Mo / 2.75 Mo</small>

									</span>&nbsp;
									<span class="button">
										File4.zip
										<span class="progress-bar"><span class="orange with-stripes"></span></span>
									</span>
								</div>
								
								<ul class="files">
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/demo/files/file1-mini.png" />" width="64" height="45" class="thumb"></span>

										Concept car.jpg
									</a></li>
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/demo/files/file2-mini.png" />" width="64" height="45" class="thumb"></span>
										Concept car 2.jpg
									</a></li>
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/demo/files/file3-mini.png" />" width="64" height="45" class="thumb"></span>
										Concept car 3.jpg
									</a></li>

									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/demo/files/file4-mini.png" />" width="64" height="45" class="thumb"></span>
										Concept car 4.jpg
									</a></li>
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/icons/finefiles/64/excel.png" />" width="64" height="64"></span>
										Example.xls
									</a></li>
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/demo/files/file5-mini.png" />" width="64" height="45" class="thumb"></span>

										Concept car 5.jpg
									</a></li>
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/demo/files/file6-mini.png" />" width="64" height="45" class="thumb"></span>
										Concept car 6.jpg
									</a></li>
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/icons/finefiles/64/text.png" />" width="64" height="64"></span>
										Readme.txt
									</a></li>

									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/icons/finefiles/64/swf.png" />" width="64" height="64"></span>
										Animation.swf
									</a></li>
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/demo/files/file7-mini.png" />" width="64" height="45" class="thumb"></span>
										Concept car 7.jpg
									</a></li>
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/demo/files/file8-mini.png" />" width="64" height="45" class="thumb"></span>

										Concept car 8.jpg
									</a></li>
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/demo/files/file9-mini.png" />" width="64" height="45" class="thumb"></span>
										Inside view.jpg
									</a></li>
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/icons/finefiles/64/pdf.png" />" width="64" height="64"></span>
										Instructions.pdf
									</a></li>

									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/icons/finefiles/64/mp3.png" />" width="64" height="64"></span>
										My_favorite_song.mp3
									</a></li>
									<li><a href="javascript:void(0)">
										<span><img src="<spring:url value="/resources/styles/themes/admin/images/icons/finefiles/64/text.png" />" width="64" height="64"></span>
										Copyright.txt
									</a></li>
								</ul>
								
							</div>

						</div>
						
						<ul class="message">
							<li>15 files found</li>
						</ul>
						
					</div>
				</div>
				
				<div class="block-footer">
					<span class="float-right">24 folders, 248 files</span>

					24.5 Mo total
				</div>
				
			</div></div>
		</section>
		
	</article>
</body>